<template>
  <div>
    <div
      class="list-preview"
      :style="{
        width: '1200px',
        margin: '10px auto',
        position: 'relative',
        flexWrap: 'wrap',
        background: 'none',
        display: 'flex',
      }"
    >
      <!-- 查询 -->
      <el-form
        :inline="true"
        :model="formSearch"
        class="list-form-pv"
        :style="{
          padding: '10px',
          alignItems: 'center',
          flexWrap: 'wrap',
          background: 'none',
          display: 'flex',
          width: '100%',
          height: 'auto',
          order: '2',
        }"
      >
        <el-form-item :style="{ margin: '0 10px' }">
          <div
            class="lable"
            v-if="true"
            :style="{
              width: 'auto',
              padding: '0 10px',
              lineHeight: '42px',
              display: 'inline-block',
            }"
          >
            电影名称
          </div>
          <el-input
            v-model="formSearch.dianyingmingcheng"
            placeholder="电影名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :style="{ margin: '0 10px' }">
          <div
            class="lable"
            v-if="true"
            :style="{
              width: 'auto',
              padding: '0 10px',
              lineHeight: '42px',
              display: 'inline-block',
            }"
          >
            电影导演
          </div>
          <el-input
            v-model="formSearch.dianyingdaoyan"
            placeholder="电影导演"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :style="{ margin: '0 10px' }">
          <div
            class="lable"
            v-if="true"
            :style="{
              width: 'auto',
              padding: '0 10px',
              lineHeight: '42px',
              display: 'inline-block',
            }"
          >
            演员阵容
          </div>
          <el-input
            v-model="formSearch.yanyuanzhenrong"
            placeholder="演员阵容"
            clearable
          ></el-input>
        </el-form-item>
        <el-button
          v-if="true"
          :style="{
            cursor: 'pointer',
            border: '1px solid #21a63d',
            padding: '0px 15px',
            boxShadow: '1px 1px 3px #21a63d',
            margin: '0px 10px 0 0',
            color: '#fff',
            outline: 'none',
            borderRadius: '4px',
            background: '#25bd45',
            width: 'auto',
            fontSize: '14px',
            lineHeight: '40px',
            height: '40px',
          }"
          type="primary"
          @click="getList(1, curFenlei)"
          ><i
            v-if="true"
            :style="{ color: '#fff', margin: '0 10px 0 0', fontSize: '14px' }"
            class="el-icon-search"
          ></i
          >查询</el-button
        >
      </el-form>

      <!-- 分类 -->
      <div
        class="category-1"
        :style="{
          width: '100%',
          padding: '10px',
          background: 'none',
          display: 'flex',
          height: 'auto',
          order: '1',
        }"
      >
        <div
          class="item"
          :class="swiperIndex == '-1' ? 'active' : ''"
          @click="getList(1, '全部')"
          :plain="isPlain"
        >
          全部
        </div>
        <div
          class="item"
          :class="swiperIndex == index ? 'active' : ''"
          v-for="(item, index) in fenlei"
          :key="index"
          @click="getList(1, item, 'btn' + index)"
          :ref="'btn' + index"
          plain
        >
          {{ item }}
        </div>
      </div>

      <!-- 电影信息 -->
      <div
        class="list"
        :style="{
          width: '100%',
          margin: '0 0 10px',
          background: 'none',
          order: '3',
        }"
      >
        <div
          class="list1 index-pv1"
          :style="{
            border: '1px solid #dfdfdf',
            padding: '20px 10px',
            margin: '16px 0 0 0',
            borderRadius: '16px',
            flexWrap: 'wrap',
            background: '#fff',
            display: 'flex',
            width: '1200px',
            height: 'auto',
          }"
        >
          <div
            :style="{
              margin: '0 1% 20px 1%',
              borderRadius: '8px',
              background: 'none',
              display: 'inline-block',
              width: '23%',
              position: 'relative',
              height: 'auto',
            }"
            v-for="(item, index) in dataList"
            :key="index"
            @click="toDetail(item)"
            class="list-item animation-box"
          >
            <img
              :style="{
                cursor: 'pointer',
                width: '100%',
                objectFit: 'cover',
                borderRadius: '8px',
                display: 'block',
                height: '274px',
              }"
              v-if="
                item.dianyinghaibao &&
                  item.dianyinghaibao.substr(0, 4) == 'http'
              "
              :src="item.dianyinghaibao"
              class="image"
            />
            <img
              :style="{
                cursor: 'pointer',
                width: '100%',
                objectFit: 'cover',
                borderRadius: '8px',
                display: 'block',
                height: '274px',
              }"
              v-else
              :src="
                baseUrl +
                  (item.dianyinghaibao ? item.dianyinghaibao.split(',')[0] : '')
              "
              class="image"
            />
            <div
              v-if="item.price"
              :style="{
                padding: '0 10px',
                boxShadow: '1px 1px 1px #ddd',
                margin: '4px 0 0 0',
                color: 'red',
                borderRadius: '8px',
                background:
                  'radial-gradient(circle, rgba(250,250,250,1) 0%, rgba(220,230,250,0.5) 100%)',
                lineHeight: '30px',
                fontSize: '14px',
              }"
              class="price"
            >
              <span :style="{ fontSize: '12px' }">￥</span>{{ item.price }}
            </div>
            <div
              :style="{
                padding: '0 10px',
                boxShadow: '1px 1px 1px #ddd',
                margin: '4px 0 0 0',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                color: '#333',
                borderRadius: '8px',
                background:
                  'radial-gradient(circle, rgba(250,250,250,1) 0%, rgba(220,230,250,0.5) 100%)',
                lineHeight: '30px',
                fontSize: '14px',
                textOverflow: 'ellipsis',
              }"
              class="name "
            >
              {{ item.dianyingmingcheng }}
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
        background
        class="pagination"
        :pager-count="7"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        prev-text="<"
        next-text=">"
        :hide-on-single-page="true"
        :layout="['total', 'prev', 'pager', 'next', 'sizes', 'jumper'].join()"
        :total="total"
        :style="{
          padding: '0',
          margin: '10px auto',
          whiteSpace: 'nowrap',
          color: '#333',
          width: '1200px',
          fontWeight: '500',
          order: '4',
        }"
        @current-change="curChange"
        @prev-click="prevClick"
        @next-click="nextClick"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      layouts: "",
      swiperIndex: -1,
      baseUrl: "",
      breadcrumbItem: [
        {
          name: "电影信息",
        },
      ],
      formSearch: {
        dianyingmingcheng: "",
        dianyingdaoyan: "",
        yanyuanzhenrong: "",
      },
      fenlei: [],
      dataList: [],
      total: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 50],
      totalPage: 1,
      curFenlei: "全部",
      isPlain: false,
      indexQueryCondition: "",
      timeRange: [],
    };
  },
  created() {
    this.indexQueryCondition = this.$route.query.indexQueryCondition
      ? this.$route.query.indexQueryCondition
      : "";
    this.baseUrl = this.$config.baseUrl;
    this.getFenlei();
    this.getList(1, "全部");
  },
  //方法集合
  methods: {
    add(path) {
      this.$router.push({ path: path });
    },
    getFenlei() {
      this.$http.get("option/dianyingfenlei/dianyingfenlei").then((res) => {
        if (res.data.code == 0) {
          this.fenlei = res.data.data;
        }
      });
    },
    getList(page, fenlei, ref = "") {
      if (fenlei == "全部") this.swiperIndex = -1;
      for (let i = 0; i < this.fenlei.length; i++) {
        if (fenlei == this.fenlei[i]) {
          this.swiperIndex = i;
          break;
        }
      }
      this.curFenlei = fenlei;
      if (this.curFenlei == "全部") {
        this.isPlain = false;
      } else {
        this.isPlain = true;
      }
      let params = { page, limit: this.pageSize };
      let searchWhere = {};
      if (this.indexQueryCondition) {
        searchWhere.dianyingmingcheng = "%" + this.indexQueryCondition + "%";
        this.indexQueryCondition = "";
      }
      if (this.formSearch.dianyingmingcheng != "")
        searchWhere.dianyingmingcheng =
          "%" + this.formSearch.dianyingmingcheng + "%";
      if (this.formSearch.dianyingdaoyan != "")
        searchWhere.dianyingdaoyan = "%" + this.formSearch.dianyingdaoyan + "%";
      if (this.formSearch.yanyuanzhenrong != "")
        searchWhere.yanyuanzhenrong =
          "%" + this.formSearch.yanyuanzhenrong + "%";
      params["sort"] = "shangjiariqi";
      params["order"] = "desc";
      if (this.curFenlei != "全部") searchWhere.dianyingfenlei = this.curFenlei;
      this.$http
        .get("dianyingxinxi/list", {
          params: Object.assign(params, searchWhere),
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.pageSize;
            this.totalPage = res.data.data.totalPage;

            this.pageSizes = [
              this.pageSize,
              this.pageSize * 2,
              this.pageSize * 3,
              this.pageSize * 5,
            ];
          }
        });
    },
    curChange(page) {
      this.getList(page, this.curFenlei);
    },
    prevClick(page) {
      this.getList(page, this.curFenlei);
    },
    nextClick(page) {
      this.getList(page, this.curFenlei);
    },
    toDetail(item) {
      this.$router.push({
        path: "/index/dianyingxinxiDetail",
        query: { detailObj: JSON.stringify(item) },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.list-preview .list-form-pv .el-input {
  width: auto;
}

.category-1 .item {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 10px 0 0;
  overflow: hidden;
  color: #555;
  background-color: rgb(246, 248, 246);
  white-space: nowrap;
  width: 130px;
  font-size: 14px;
  line-height: 40px;
  text-overflow: ellipsis;
  text-align: center;
}

.category-1 .item:hover {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 10px 0 0;
  background-color: rgb(225, 225, 225);
  width: 130px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}

.category-1 .item.active {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 10px 0 0;
  background-color: rgb(225, 225, 225);
  width: 130px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}

.category-2 .item {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 0 10px 0;
  color: #999;
  background: #efefef;
  width: 100%;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}

.category-2 .item:hover {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 0 10px 0;
  color: #999;
  background: #efefef;
  width: 100%;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}

.category-2 .item.active {
  cursor: pointer;
  border-radius: 4px;
  margin: 0 0 10px 0;
  color: #999;
  background: #efefef;
  width: 100%;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}

.list-form-pv .el-input /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 10px;
  box-shadow: 1px 1px 1px #ccc;
  margin: 0px;
  outline: none;
  color: #666;
  width: 140px;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
}

.list-form-pv .el-select /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 10px;
  box-shadow: 1px 1px 1px #ccc;
  margin: 0px;
  outline: none;
  color: #666;
  width: 140px;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
}

.list-form-pv .el-date-editor /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 30px;
  box-shadow: 1px 1px 1px #ccc;
  margin: 0px;
  outline: none;
  color: #666;
  width: 140px;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
}

.list .index-pv1 .animation-box {
  transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  z-index: initial;
}

.list .index-pv1 .animation-box:hover {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  transition: 0.3s;
  z-index: 1;
}

.list .index-pv1 .animation-box img {
  transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
}

.list .index-pv1 .animation-box img:hover {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  transition: 0.3s;
}
</style>
